<template>
  <div class="out-box">
    <div class="content-ab" v-if="screenWidth > 1024 && !isMobile()">
      <div class="black-bg">
      <div class="black-line">
        <scrollHandle>
          <div class="serve-content">
            <div class="left-tit">品牌战略</div>
            <div class="right-cont">
              <div>品牌命名</div>
              <div>品牌语言体系</div>
              <div>品牌定位</div>
              <div>品牌VI设计</div>
              <div>品牌核心价值</div>
              <div>品牌纹样设计</div>
              <div>品牌大理想</div>
              <div>品牌符号应用传播</div>
              <div>品牌口号（Slogan）</div>
              <div>品牌IP设计</div>
            </div>
          </div>
        </scrollHandle>
        <scrollHandle>
          <div class="serve-content">
            <div class="left-tit">产品打造</div>
            <div class="right-cont">
              <div>产品开发建议</div>
              <div>产品语言体系</div>
              <div>产品品类定义</div>
              <div>产品包装设计</div>
              <div>产品命名</div>
              <div>产品推广创意</div>
              <div>产品利益点</div>
              <div>产品拍摄</div>
            </div>
          </div>
        </scrollHandle>
        <scrollHandle>
          <div class="serve-content">
            <div class="left-tit">电商运营</div>
            <div class="right-cont">
              <div>店招戏剧化创意设计</div>
              <div>直播间搭建</div>
              <div>焦点图/Banner设计</div>
              <div>0-1店铺起号</div>
              <div>卖点戏剧化呈现</div>
              <div>爆品打造</div>
              <div>详情页设计</div>
              <div>明星达人直播</div>
              <div>线上营销策略</div>
              <div>广告投放（千川）</div>
              <div>抖音店铺运营</div>
              <div>数据分析</div>
              <div>短视频制作</div>
              <div>培训服务</div>
            </div>
          </div>
        </scrollHandle>
        <scrollHandle>
          <div class="last-serve-content">
            <div class="left-tit">空间设计</div>
            <div class="right-cont">
              <div>品牌终端体验研究</div>
              <div>展厅/办公空间设计</div>
              <div>品牌消费体验研究</div>
              <div>快闪店设计</div>
              <div>品牌连锁门店系统SI设计</div>
              <div>橱窗装置设计</div>
              <div>品牌创新体验店设计</div>
              <div>导示系统设计</div>
            </div>
          </div>
        </scrollHandle>
     

      </div>
      </div>
      <scrollHandle>
          <div class="service-img">
            <el-image class="imgstyle" :src="servebg" fit="cover" />
          </div>
        </scrollHandle>
    </div>
    <div class="content-ab-mobel" v-if="screenWidth <= 1024 || isMobile()">
      <div class="black-bg-mobel">
        <scrollHandle>
          <div class="serve-content-mobel">
            <div class="left-tit-mobel">品牌战略</div>
            <div class="right-cont-mobel">
              <div>品牌命名</div>
              <div>品牌语言体系</div>
              <div>品牌定位</div>
              <div>品牌VI设计</div>
              <div>品牌核心价值</div>
              <div>品牌纹样设计</div>
              <div>品牌大理想</div>
              <div>品牌符号应用传播</div>
              <div>品牌口号（Slogan）</div>
              <div>品牌IP设计</div>
            </div>
          </div>
        </scrollHandle>
        <scrollHandle>
          <div class="serve-content-mobel">
            <div class="left-tit-mobel">产品打造</div>
            <div class="right-cont-mobel">
              <div>产品开发建议</div>
              <div>产品语言体系</div>
              <div>产品品类定义</div>
              <div>产品包装设计</div>
              <div>产品命名</div>
              <div>产品推广创意</div>
              <div>产品利益点</div>
              <div>产品拍摄</div>
            </div>
          </div>
        </scrollHandle>
        <scrollHandle>
          <div class="serve-content-mobel">
            <div class="left-tit-mobel">电商运营</div>
            <div class="right-cont-mobel">
              <div>店招戏剧化创意设计</div>
              <div>直播间搭建</div>
              <div>焦点图/Banner设计</div>
              <div>0-1店铺起号</div>
              <div>卖点戏剧化呈现</div>
              <div>爆品打造</div>
              <div>详情页设计</div>
              <div>明星达人直播</div>
              <div>线上营销策略</div>
              <div>广告投放（千川）</div>
              <div>抖音店铺运营</div>
              <div>数据分析</div>
              <div>短视频制作</div>
              <div>培训服务</div>
            </div>
          </div>
        </scrollHandle>
        <scrollHandle>
          <div class="last-serve-content-mobel">
            <div class="left-tit-mobel">空间设计</div>
            <div class="right-cont-mobel">
              <div>品牌终端体验研究</div>
              <div>展厅\办公空间设计</div>
              <div>品牌消费体验研究</div>
              <div>快闪店设计</div>
              <div>品牌连锁门店系统SI设计</div>
              <div>橱窗装置设计</div>
              <div>品牌创新体验店设计</div>
              <div>导示系统设计</div>
            </div>
          </div>
        </scrollHandle>
     

      </div>
      <scrollHandle>
          <div class="service-img-mobel">
            <el-image class="imgstyle-mobel" :src="servebg" fit="cover" />
          </div>
        </scrollHandle>
    </div>

  </div>
</template>

<script>
import servebg from "@/assets/imgs/servebg.jpg"
import { picConfigList } from "@/api/defapi";
import scrollHandle from "@/components/scrollHandle.vue";
export default {
  components: {
    scrollHandle,
  },
  data() {
    return {
      servebg:servebg,
      screenWidth: window.innerWidth,
      bannerImgList: '',
      baseApi: process.env.VUE_APP_IMGADDRESS,
      brandData: ''
    };
  },
  mounted() {
    window.addEventListener("resize", this.getScreenSise);
    picConfigList({ imgType: 3 }).then(res => {
      this.brandData = res.data
    })
  },
  methods: {
    isMobile() {
      const userAgentInfo = navigator.userAgent;
      const mobileAgents = [
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod",
      ];
      const mobileFlag = mobileAgents.some((mobileAgent) => {
        return userAgentInfo.indexOf(mobileAgent) > 0;
      });

      let isPro = /Version\/.* Safari/.test(userAgentInfo); // 检查是否有Safari标识，通常iPad Pro才会有

      // 更精确的检测方式，检查屏幕尺寸或像素比（PPI）
      let pixelRatio = window.devicePixelRatio;
      let isHighResolution = pixelRatio >= 2; // iPad Pro的大约分辨率为1024x1366，像素比为2或3

      let isipadpro = isPro && isHighResolution;
      console.log(isipadpro, isPro, isHighResolution);

      let isiPad = (navigator.userAgent.match(/(iPad)/) || (navigator.userAgent.match(/(Macintosh)/) && navigator.maxTouchPoints >= 1));
      return mobileFlag || isiPad;
    },
    getScreenSise() {
      this.screenWidth = window.innerWidth;
    },

  },
};
</script>

<style lang="scss" scoped>
.out-box {
  background-color: #fff;
  width: 100%;
}

.content-ab {
  width: 100%;
  // background: #000;
  // margin: 0 auto;
}
.black-line{
  width: 100%;
  max-width: 1920px;
  padding:0 100px 90px;
  margin: 0 auto;
  // background: #000;
  color: #fff;
}
.black-bg {
  width: 100%;
  background: #000;
}

.serve-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px solid #fff;
  position: relative;
}
.serve-content::after{
  content:'';
  width:18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  background-color: #ff2141;
  left: 0;
  bottom: -9px;
}
.serve-content::before{
  content:'';
  width:18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  background-color: #ff2141;
  right: 0;
  bottom: -9px;
}
  .last-serve-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 80px;
}

.left-tit {
  font-size: 50px;
}

.right-cont {
  width: 100%;
  max-width: 800px;
  min-width: 600px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  font-size: 24px;
  gap: 32px;
}
.service-img{
  padding: 100px;
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
}
.imgstyle{
  width: 100%;
}


.content-ab-mobel {
  background-color: #fff;
  
  width: 100%;
}
.black-bg-mobel {
  width: 100%;
  background: #000;
  color: #fff;
  padding: 10rem 3.2rem;
}

.serve-content-mobel {
  display: flex;
  flex-direction: column;
  // align-items: center;
  padding: 8rem 0;
  border-bottom: 1px solid #fff;
}
.serve-content-mobel::after{
  content:'';
  width:1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  position: absolute;
  background-color: #ff2141;
  left: 0;
  bottom: -.9rem;
}
.serve-content-mobel::before{
  content:'';
  width:1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  position: absolute;
  background-color: #ff2141;
  right: 0;
  bottom: -.9rem;
}
.last-serve-content-mobel {
  display: flex;
  flex-direction: column;
  // align-items: center;
  padding: 8rem 0;
}

.left-tit-mobel {
  font-size: 6rem;
  padding-bottom: 5rem;
}

.right-cont-mobel {
  width: 100%;
  display: grid;
  grid-template-columns:  1fr 1fr;
  font-size: 3rem;
  gap: 2rem;
}
.service-img-mobel{
  padding: 3rem;
  width: 100%;
}
.imgstyle-mobel{
  width: 100%;
}

</style>